<template>
  <div class="tool-bar-lf">
    <CollapseIcon id="collapseIcon" />
    <Breadcrumb id="breadcrumb" v-if="breadcrumb" />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import actions from '../../stores/globalState';
import CollapseIcon from './CollapseIcon.vue';
import Breadcrumb from './Breadcrumb.vue';

const breadcrumb = computed(() => (actions as any).getGlobalState().breadcrumb !== false);
</script>

<script lang="ts">
export default {
  name: 'ToolBarLeft'
};
</script>

<style scoped lang="scss">
.tool-bar-lf {
  display: flex;
  align-items: center;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
}
</style>
